<template>
  <view>
    <view class="info-box" :key="item.id" v-for="item in orderInfo">
      <view class="info_box">
        <template v-if="!!item.name">
          <view class="info_item">
            <view class="name">姓名：</view>
            <view class="value">{{ item.name }}</view>
          </view>
          <view class="info_item">
            <view class="name">手机号码：</view>
            <view class="value">{{ item.phone }}</view>
          </view>
          <view class="info_item">
            <view class="name">微信名：</view>
            <view class="value">{{ item.wx_name }}</view>
          </view>
        </template>
        <view class="info_item" v-if="!!item.vin_no">
          <view class="name">车牌号：</view>
          <view class="value">{{ item.vin_no }}</view>
        </view>
        <view class="info_item">
          <view class="name">运费：</view>
          <view class="value">￥{{ item.price_transport | moneyShow }}</view>
        </view>
        <template v-if="item.logistics_no && item.logistics_no != 'null'">
          <view class="info_item">
            <view class="name">快递单号：</view>
            <view class="value">{{ item.logistics_no }}</view>
            <view class="copy" @click="touckCopy(item.logistics_no)">复制</view>
          </view>
          <view class="info_item" v-if="!!item.logistics_no">
            <view class="name">物流信息：</view>
            <view class="value"></view>
            <view class="coupon" @click.stop="queryPostInfo(item.logistics_no)">物 流</view>
          </view>
        </template>
        <view class="info_item">
          <view class="name">订单编号：</view>
          <view class="value">{{ item.v_id }}</view>
          <view class="copy" @click="touckCopy(item.v_id)">复制</view>
        </view>
        <view class="info_item">
          <view class="name">创建时间：</view>
          <view class="value">{{ item.create_time | dateMimute }}</view>
        </view>
        <!-- <template> -->
        <template v-if="showAddress">
          <view class="info_item">
            <view class="name">收货人：</view>
            <view class="value">{{ item.address.name }}</view>
          </view>
          <view class="info_item">
            <view class="name">收货电话：</view>
            <view class="value">{{ item.address.phone }}</view>
          </view>
          <view class="info_item">
            <view class="name">收货地址：</view>
            <view class="value">{{ deliveryAddress }}</view>
          </view>
        </template>
        <view class="info_item">
          <view class="name">备注：</view>
          <view class="value">{{ item.remarks }}</view>
        </view>
        <!-- <view class="value" v-html="item.remarks"></view> -->
      </view>
    </view>
  </view>
</template>
<script>
import { fastPieceApi, } from '@/API/Shop'
export default {
  name: 'OrderInfo',
  props: {
    orderInfo: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      baseUrl: this.$baseUrl,
    }
  },
  methods: {
    // 手点复制
    touckCopy(content) {
      uni.setClipboardData({
        data: `${content}`,
        success: () => {
          uni.$showMsg('复制成功！')
        }
      })
    },
    // 查快递信息
    async queryPostInfo(No) {
      // let param = { waybillNo: 'SF1148970949236' }
      let param = { waybillNo: `SF${No}` }
      const { data } = await fastPieceApi(param)
      // 弹窗
      this.showModal = true
      this.logisticsInfo = data?.apiResultData?.obj?.route
      // console.log('pp',data)
      console.log('pp', data.apiResultData.obj.route[0].opCode == 80)
    }
  }
}
</script>
<style lang='scss' scoped>
@import '@/styles/mixins.scss';

.info-box {
  width: 92%;
  padding: 10rpx 30rpx;
  margin: 0rpx auto;
  background-color: #fff;
  border-bottom: #eee 1px solid;
  // border-radius: 15rpx;
  border-bottom-left-radius: 15rpx;
  border-bottom-right-radius: 15rpx;
  // box-shadow: $theme-shadow;
  margin-bottom: 20rpx;
}

.order_info {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin-bottom: 20rpx;
}

.info_box {
  .info_item {
    display: flex;
    justify-content: flex-end;
    align-content: center;
    font-size: 24rpx;
    line-height: 48rpx;

    .name {
      color: #222;
      margin-right: auto;
    }

    .value {
      color: #999;
    }

    .copy {
      margin-left: 12rpx;
      font-size: 24rpx;
      color: #999;
    }

    .coupon {
      height: 34rpx;
      margin-top: 8rpx;
      background-color: $theme-color;
      line-height: 34rpx;
      font-size: 24rpx;
      border-radius: 8rpx;
      color: #fafafa;
      padding: 0rpx 12rpx;
    }
  }
}
</style>